import 'package:flutter/material.dart';

import 'package:flutter_ume_kit_mock/data/mock_config_manager.dart';
import 'package:flutter_ume_kit_mock/data/model/mock_history.dart';
import 'package:flutter_ume_kit_mock/data/model/mock.dart';

class MockHistoryPage extends StatelessWidget {
  final void Function() onDismiss;
  final void Function(Mock mock) onMockClick;

  const MockHistoryPage(
      {required this.onDismiss, required this.onMockClick, Key? key})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        GestureDetector(
          onTap: onDismiss,
          child: const ColoredBox(
              color: Colors.black54,
              child: SizedBox(height: 150, width: double.infinity)),
        ),
        Expanded(
          child: ColoredBox(
              color: Colors.white, child: Material(child: _mockHistory())),
        ),
      ],
    );
  }

  ///详情
  Widget _mockHistory() {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        //返回按钮
        GestureDetector(
          onTap: onDismiss,
          child: const Padding(
            padding: EdgeInsets.all(10.0),
            child: Icon(Icons.arrow_back),
          ),
        ),
        Expanded(
            child: ValueListenableBuilder<List<MockHistory>>(
          valueListenable: MockConfigManager.mockHistoryNotifier,
          builder: (context, value, child) {
            return ListView.builder(
              itemBuilder: (context, index) {
                return _buildHistoryItem(value[index]);
              },
              padding: EdgeInsets.zero,
              itemCount: value.length,
            );
          },
        ))
      ],
    );
  }

  Widget _buildHistoryItem(MockHistory mockHistory) {
    Mock mock = mockHistory.mock;
    return Ink(
      color: mockHistory.tamper
          ? Colors.greenAccent.shade200
          : Colors.lightBlue.shade50,
      child: InkWell(
        overlayColor:
            MaterialStateProperty.all(Colors.lightBlue.withOpacity(0.1)),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            SizedBox(
              height: 1,
              width: double.infinity,
              child: ColoredBox(
                color: Colors.grey.shade300,
              ),
            ),
            //时间
            Padding(
                padding: const EdgeInsets.only(left: 16, top: 10),
                child: Row(
                  children: [
                    Text(mockHistory.time,
                        style: const TextStyle(fontWeight: FontWeight.bold)),
                    _buildEffects(mockHistory),
                  ],
                )),
            _mockTitleText(mock),
            _mockRequestText(mock),
            //描述
            const SizedBox(height: 10),
          ],
        ),
        onTap: () {
          onMockClick(mock);
        },
      ),
    );
  }

  ///标题
  Widget _mockTitleText(Mock mock) {
    return Padding(
      padding: const EdgeInsets.only(left: 16),
      child: Text(
        "${mock.fields?.title}",
        overflow: TextOverflow.ellipsis,
        style: TextStyle(
            color: Colors.grey.shade700,
            fontSize: 14,
            fontWeight: FontWeight.w600),
      ),
    );
  }

  Widget _buildEffects(MockHistory mockHistory) {
    return Padding(
      padding: const EdgeInsets.only(left: 10),
      child: Row(
        children: [
          if (mockHistory.delayed) _buildEffectText("delay"),
          if (mockHistory.fake) _buildEffectText("fake"),
          if (mockHistory.tamper) _buildEffectText("tamper")
        ],
      ),
    );
  }

  Widget _buildEffectText(String effect) {
    return Container(
      margin: const EdgeInsets.only(right: 5),
      padding: const EdgeInsets.only(left: 5, right: 5, top: 1, bottom: 1),
      decoration: BoxDecoration(
          color: Colors.grey.shade500,
          borderRadius: const BorderRadius.all(Radius.circular(3))),
      child: Text(effect, style: const TextStyle(color: Colors.white, fontSize: 10)),
    );
  }

  ///请求
  Widget _mockRequestText(Mock mock) {
    return Padding(
      padding: const EdgeInsets.only(left: 16, top: 1),
      child: Row(
        children: [
          Container(
              margin: const EdgeInsets.only(right: 5),
              decoration: BoxDecoration(
                  color: Colors.orange.shade200,
                  borderRadius: const BorderRadius.all(Radius.circular(5))),
              padding: const EdgeInsets.only(left: 4, right: 4, bottom: 1),
              alignment: Alignment.center,
              child: Text(
                "${mock.request?.fields?.method}",
                style: const TextStyle(
                    color: Colors.white,
                    fontSize: 9,
                    fontWeight: FontWeight.bold),
                strutStyle: const StrutStyle(leading: 0, forceStrutHeight: true),
              )),
          Expanded(
            child: Text(
              mock.request?.fields?.path ?? "",
              style: TextStyle(
                  overflow: TextOverflow.ellipsis,
                  color: Colors.grey.shade500,
                  fontSize: 12,
                  fontWeight: FontWeight.normal),
            ),
          ),
        ],
      ),
    );
  }
}
